<template>
  <div>
    <div style="height:70px"></div>
    <div align="center">
      <br />
      <a-input-search
        v-model:value="keyword"
        placeholder="搜索电影"
        enter-button="搜索"
        size="large"
        style="width:600px"
        @search="search"
      />
    </div>

    <div>
      <section class="w3l-grids">
        <div class="grids-main py-5">
          <div class="container py-lg-3">
            <div class="w3l-populohny-grids">
              <!--  动态电影 -->
              <div v-for="item in movieList" :key="item.mov_id">
                <div class="item vhny-grid">
                  <div class="box16">
                    <!--  动态电影链接，链接到介绍页面 -->
                    <a @click="toTicket(item.mov_id)">
                      <figure>
                        <img
                          class="img-fluid"
                          :src="item.mov_img_path"
                          style="height: 350px；width: 250px"
                          alt
                        />
                      </figure>
                      <div class="box-content">
                        <h3 class="title">{{item.mov_name}}</h3>
                      </div>
                      <span class="fa fa-play video-icon" aria-hidden="true"></span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>
    
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";

import { get } from "@/common";

const router = useRouter();
const route = useRoute();

const keyword = ref("");

const movieList = ref([]);
const getMovies = () => {
  get("/info/movie/movie-list").then(res => {
    movieList.value = res.data;
  });
};

const search = () => {
  get("/search/movie/query", { keyword: keyword.value }).then(res => {
    movieList.value = res.data;
  });
};

const getKeyword = () => {
  keyword.value = route.query.keyword;
  if(keyword.value==""){
    getMovies();
  }else{
    search();
  }
};

getKeyword();

const toTicket = (id) => {
  router.push({ path: '/home/cust_ticket', query: {mov_id:id} });
};

</script>

<style scope>
@import "../css/cinema.css";
@import "../css/style-starter.css";
@import "../css/base.css";
@import "../css/bootstrap-grid.css";
</style>